<template>
  <div class="db-management-preview">
    <teleport to="#layout-toolbar-title" defer v-if="filename">
      预览({{ filename }})
    </teleport>
    <div class="menu">
      <a-spin :spinning="loading">
        <a-menu
          v-model:openKeys="openKeys"
          v-model:selectedKeys="selectedKeys"
          mode="vertical"
          :items="items"
        />
      </a-spin>
    </div>
    <div class="menu-content">
      <template v-if="!loading && !error">
        <keep-alive>
          <content-attribute
            v-if="selectedKeys.includes('attribute')"
            :data="data"
          />
          <content-excel
            v-else-if="selectedKeys.includes('excel')"
            :data="data"
          />
          <content-code
            v-else-if="selectedKeys.includes('code')"
            :data="data"
          />
          <content-img v-else-if="selectedKeys.includes('img')" :data="data" />
          <content-csv v-else-if="selectedKeys.includes('csv')" :data="data" />
          <content-txt v-else-if="selectedKeys.includes('txt')" :data="data" />
          <content-json
            v-else-if="selectedKeys.includes('json')"
            :data="data"
          />
          <content-pdf v-else-if="selectedKeys.includes('pdf')" :data="data" />
          <content-model
            v-else-if="selectedKeys.includes('model')"
            :data="data"
          />
          <div
            v-else
            style="
              height: 100%;
              display: flex;
              justify-self: center;
              align-items: center;
            "
          >
            该文件类型不支持预览
          </div>
        </keep-alive>
      </template>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import ContentAttribute from './menu-content-attribute.vue'
import ContentExcel from './menu-content-preview-excel.vue'
import ContentCode from './menu-content-preview-code.vue'
import ContentImg from './menu-content-preview-img.vue'
import ContentCsv from './menu-content-preview-csv.vue'
import ContentTxt from './menu-content-preview-txt.vue'
import ContentJson from './menu-content-preview-json.vue'
import ContentPdf from './menu-content-preview-pdf.vue'
import ContentModel from './menu-content-preview-model.vue'
import { getFileDetail, getPermission } from '@/api/db.js'
import { useDbType } from '@/views/db-management/provide-context.js'
/**
 * 全局
 */
let route = useRoute()
/**
 * menu
 */
let selectedKeys = ref(['attribute'])
let openKeys = ref([])
let items = ref([
  {
    key: 'attribute',
    label: '属性预览',
    title: '属性预览',
  },
])

/**
 * 加载数据
 */
let loading = ref(false)
let fileType = ref()
let filename = ref()
let dbType = useDbType()
let data = ref({})
let error = ref(false)
let permission = ref({})
onMounted(async () => {
  loading.value = true
  try {
    let result = await getFileDetail(
      {
        id: route?.params?.id,
      },
      dbType,
    )
    data.value = result?.data
    fileType.value = result?.data?.fileType
    filename.value = result?.data?.fileName + '.' + result?.data?.fileType

    permission.value = (
      await getPermission({ id: route.params.categoryId }, dbType)
    ).data
    if (permission.value.preview === false) {
    } else if (fileType.value === 'xls' || fileType.value === 'xlsx') {
      items.value.push({
        key: 'excel',
        label: '内容预览',
        title: '内容预览',
      })
    } else if (
      fileType.value === 'py' ||
      fileType.value === 'js' ||
      fileType.value === 'html' ||
      fileType.value === 'css' ||
      fileType.value === 'xml'
    ) {
      items.value.push({
        key: 'code',
        label: '内容预览',
        title: '内容预览',
      })
    } else if (['jpg', 'png', 'jpeg', 'gif'].includes(fileType.value)) {
      items.value.push({
        key: 'img',
        label: '内容预览',
        title: '内容预览',
      })
    } else if (['csv'].includes(fileType.value)) {
      items.value.push({
        key: 'csv',
        label: '内容预览',
        title: '内容预览',
      })
    } else if (['txt'].includes(fileType.value)) {
      items.value.push({
        key: 'txt',
        label: '内容预览',
        title: '内容预览',
      })
    } else if (['json'].includes(fileType.value)) {
      items.value.push({
        key: 'json',
        label: '内容预览',
        title: '内容预览',
      })
    } else if (['pdf', 'docx', 'doc'].includes(fileType.value)) {
      items.value.push({
        key: 'pdf',
        label: '内容预览',
        title: '内容预览',
      })
    } else if (
      ['step', 'stp', 'igs', 'iges', 'brep'].includes(fileType.value)
    ) {
      items.value.push({
        key: 'model',
        label: '内容预览',
        title: '内容预览',
      })
    } else {
      items.value.push({
        key: 'other',
        label: '内容预览',
        title: '内容预览',
      })
    }
  } catch (e) {
    console.log(e)
    error.value = e
  }
  loading.value = false
})
</script>
<style lang="less" scoped>
.db-management-preview {
  display: flex;
  height: 100%;
  .menu {
    background-color: #fff;
    flex-basis: 152px;
    padding: 14px 0px 14px 6px;
  }
  .menu-content {
    flex: 1;
    overflow: hidden;
    align-items: stretch;
    background-color: #fff;
    margin-left: 12px;
  }
}
</style>
